import { defineStore } from 'pinia';
import defaultSettings from '@/settings';
import { useDynamicTitle } from '@/utils/dynamicTitle';
import { useStorage } from '@vueuse/core';
import { ref } from 'vue';

export const useSettingsStore = defineStore('setting', () => {
	const storageSetting = useStorage('layout-setting', {
		topNav: defaultSettings.topNav,
		tagsView: defaultSettings.tagsView,
		tagsIcon: defaultSettings.tagsIcon,
		fixedHeader: defaultSettings.fixedHeader,
		sidebarLogo: defaultSettings.sidebarLogo,
		dynamicTitle: defaultSettings.dynamicTitle,
		sideTheme: defaultSettings.sideTheme,
		theme: defaultSettings.theme
	});
	const title = ref(defaultSettings.title);
	const theme = ref(storageSetting.value.theme);
	const sideTheme = ref(storageSetting.value.sideTheme);
	const showSettings = ref(defaultSettings.showSettings);
	const topNav = ref(storageSetting.value.topNav);
	const tagsView = ref(storageSetting.value.tagsView);
	const tagsIcon = ref(storageSetting.value.tagsIcon);
	const fixedHeader = ref(storageSetting.value.fixedHeader);
	const sidebarLogo = ref(storageSetting.value.sidebarLogo);
	const dynamicTitle = ref(storageSetting.value.dynamicTitle);
	const animationEnable = ref(defaultSettings.animationEnable);
	const dark = ref(defaultSettings.dark);

	const setTitle = (value) => {
		title.value = value;
		useDynamicTitle();
	};
	return {
		title,
		theme,
		sideTheme,
		showSettings,
		topNav,
		tagsView,
		tagsIcon,
		fixedHeader,
		sidebarLogo,
		dynamicTitle,
		animationEnable,
		dark,
		setTitle
	};
});
